 /*
 * @description: 查看物流信息
 * @Author: along
 * @Date: 2020-10-26
 * @Last Modified by: along
 * @Last Modified time: 2020-10-26
 */
<template>
    <div class="logisticeList">
        <el-dialog
            title="物流信息"
            :visible.sync="dialogLogistics"
            width="512px"
            :close-on-click-modal="false"
        >
            <div class="log-wrap">
                <img
                    :src="logistics.goods_cover"
                    class="log-wrap-cover"
                >
                <div class="log-main">
                    <p class="log-main-company">
                        物流公司：
                        <span class="log-main-name">
                            {{ logistics.logistics_name }}
                        </span>
                    </p>
                    <p class="log-main-company">
                        物流单号：
                        <span class="log-main-name">
                            {{ logistics.tracking_no }}
                        </span>
                        <i
                            class="el-icon-copy-document"
                            @change="copy(ogistics.tracking_no)"
                        />
                    </p>
                    <p class="log-main-company">
                        物流电话：
                        <span class="log-main-name">
                            {{ logistics.logistics_phone }}
                        </span>
                    </p>
                </div>
            </div>
            <div
                class="step"
                style="max-height:500px"
                v-if="logistics.tracking_info_list.length > 0"
            >
                <el-timeline>
                    <el-timeline-item
                        v-for="(activity, index) in logistics.tracking_info_list"
                        :key="index"
                        :icon="index == 0 ? logistics.tracking_status == 0 ? 'iconfont icon-zaituzhong' : (logistics.tracking_status == 1 ? 'iconfont icon-zaituzhong' : (logistics.tracking_status == 2 ? 'iconfont icon-zhengzaipaijian' : (logistics.tracking_status == 3 ? 'iconfont icon-yiqianshou' : (logistics.tracking_status == 4 ? 'iconfont icon-paisongshibai' : (logistics.tracking_status == 5 ? 'iconfont icon-yinanjian' : (logistics.tracking_status == 6 ? 'iconfont icon-tuijianqianshou' : 'iconfont zsdxkuaidishoujian')))))) : ''"
                        :type="index == 0 ? 'primary' : 'dangers'"
                        :size="index == 0 ? 'large' : 'normal'"
                        :timestamp="activity.create_time"
                    >
                        <p
                            v-if="index == 0"
                            style="color:#3F454B;font-size:16px;font-weight:500;margin-bottom:5px"
                        >
                            {{ logistics.tracking_status == -1 ? '暂无信息' : '' }}
                            {{ logistics.tracking_status == 0 ? '正在揽件' : '' }}
                            {{ logistics.tracking_status == 1 ? '途中' : '' }}
                            {{ logistics.tracking_status == 2 ? '派件中' : '' }}
                            {{ logistics.tracking_status == 3 ? '已签收' : '' }}
                            {{ logistics.tracking_status == 4 ? '派送失败' : '' }}
                            {{ logistics.tracking_status == 5 ? '疑难件' : '' }}
                            {{ logistics.tracking_status == 6 ? '退件签收' : '' }}
                        </p>
                        {{ activity.info }}
                    </el-timeline-item>
                </el-timeline>
            </div>
            <div v-else>
                {{ logistics.tracking_status == -1 ? '暂无信息' : '' }}
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'LogisticeList',
    data () {
        return {
            dialogLogistics: false,
            logistics: {
                logistics_phone: '',
                tracking_info_list: [],
                tracking_no: '',
                goods_no: '',
                goods_cover: '',
                logistics_name: '',
                tracking_status: '',//物流状态, -1:暂无信息, 0:揽件, 1:途中, 2:派件中, 3:已签收, 4:派送失败, 5:疑难件, 6:退件签收
                courier_phone: '',
                courier_name: ''
            }
        };
    },
    mounted () {

    },
    methods: {
        /**
         * @description 查看物流信息
         * @param {String}  order_no    //订单编号
         * @param {Number}  type        //1:订单物流,2:退货物流
         */
        fnSeeLogInfo (order_no, type) {
            this.$post('/student/shop_goods_order%5Cget_tracking_info',{
                order_no: order_no,
                type: type
            }, resp => {
                if(resp.code == 1) {
                    let list = resp.data;
                    let arr = [];

                    list.tracking_info_list.forEach(option => {
                        arr.push({
                            create_time: this.fnGetDate(option.create_time * 1000, 'yyyy/MM/dd HH:mm:ss'),
                            info: option.info
                        });
                    });

                    list.tracking_info_list = arr;

                    this.logistics = list;
                    this.dialogLogistics = !this.dialogLogistics;
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 复制物流单号
         */
        copy (no) {
            let str = no;
            let oInput = document.createElement("input");

            oInput.value = str;
            document.body.appendChild(oInput);
            oInput.select();
            document.execCommand("Copy");
            oInput.style.display = "none";
            this.$message.success('复制成功');
        },

        /**
         * @description 时间处理
         */
        fnGetDate (dateTmp, fmtTmp) {
            let fmt = fmtTmp;
            let date = dateTmp;

            if (!fmt) {
                fmt = 'yyyy.MM.dd';
            }
            if (!(date instanceof Date)) {
                date = new Date(date);
            }
            let o = {
                "M+": date.getMonth() + 1, //月份
                "d+": date.getDate(), //日
                "h+": date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, //小时
                "H+": date.getHours(), //小时
                "m+": date.getMinutes(), //分
                "s+": date.getSeconds(), //秒
                "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                "S": date.getMilliseconds() //毫秒
            };
            let week = {
                "0": "日",
                "1": "一",
                "2": "二",
                "3": "三",
                "4": "四",
                "5": "五",
                "6": "六"
            };

            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            if (/(E+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "星期" : "周") : "") + week[date.getDay() + ""]);
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                }
            }
            return fmt;
        }
    }
};
</script>

<style lang="less" scoped>
.logisticeList {
    .icon-close {
        font-size: 23px;
        color: #C0CCDA;
        font-weight: 500;
        position: absolute;
        right: 20px;
        top: 0;
        cursor: pointer;
    }
    .logsitaic-title {
        color: #1F2D3D;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 24px;
    }
    .log-wrap {
        width: 100%;
        height: 70px;
        display: flex;
        margin-bottom: 27px;
        .log-wrap-cover {
            width:70px;
            height:70px;
            border-radius:4px;
            margin-right: 16px;
        }
        .log-main {
            display: flex;
            color: #262626;
            font-size: 14px;
            flex-direction: column;
            padding-top: 8px;
            .log-main-company {
                height: 20px;
                margin-bottom: 2px;
            }
            .log-main-name {
                color: #262626;
                margin-left: 6px;
            }
            .el-icon-copy-document {
                color: #333333;
                font-size: 14px;
                cursor: pointer;
            }
        }
        .log-main:nth-child(1) {
            margin-top: 8px;
        }
    }
}
</style>

<style lang="less">
.logisticeList {
    .el-dialog__body {
        position: relative;
        max-height: 561px;
        overflow-y: auto;
    }
    .el-timeline-item__node--large {
        left: -6px;
        top: -1px;
        width: 22px;
        height: 22px;
    }
    .el-timeline-item__icon {
        position: relative;
        left: 1px;
    }
    .el-timeline-item__content {
        line-height: 22px;
    }
    .el-dialog {
        margin-top: calc(100vh / 3) !important;
    }
}
</style>